<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString
 * @LastEditTime: 2024-12-24 14:46:18
 * @FilePath: \chain-link-api-front\src\views\dashboard\index.vue
 * @Description: 控制台
-->
<template>
  <Header>
    <template #title>{{ t("title.Dashboard") }}</template>
  </Header>
  <div class="container">
    <!--    付费升级 dialog-->
    <el-dialog class="upGrade" v-model="upGradeDialog" center width="1008" @close="handleClose">
      <div class="content">
        <h5 class="dialog-title">{{ t("dashboard.Select") }}</h5>
        <div class="items">
          <div class="contentItem" :class="{ 'content-item-active': selectProduct === key }"
               v-for="(item, key) in invoiceData.productsData" :key="key" @click="funSelectProduct(item, key)">
            <div class="left">
              <div class="taocan-title-box">
                <div class="taocanTitle">{{ item.categoryName }}</div>
                <div class="taocan-month-box" v-if="selectProduct === key">{{ currentMonth }}
                  {{ formatDateUnit(currentMonthType) }}
                </div>
              </div>
              <div class="taocan-desc">
                <p v-if="selectProduct === key">
                  {{ t("dashboard.Term") }}
                  <strong>{{ currentMonth }}</strong>
                  {{ formatDateUnit(currentMonthType) }}
                </p>
                <p>
                  {{ t("dashboard.CurrencyNumber") }}：
                  <span>{{ t("dashboard.Infinite") }}</span>
                </p>
                <p>
                  {{ t("dashboard.AddressesNumber") }}：
                  <span>{{ t("dashboard.Infinite") }}</span>
                </p>
              </div>
              <div class="icon-content">
                <div class="icon-box">
                  <img class="status-icon" src="@/assets/images/dashboard/yes.png" alt="" v-if="item.desc === 'blockWatch'"/>
                  <img class="status-icon" src="@/assets/images/dashboard/no.png" alt="" v-else/>
                  <span>{{t('dashboard.RechargeText')}}</span>
                </div>
                <div class="icon-box">
                  <img class="status-icon" src="@/assets/images/dashboard/yes.png" alt=""/>
                  <span>{{t('dashboard.WithdrawalText')}}</span>
                </div>
              </div>
            </div>
            <div class="right" v-if="selectProduct === key">
              <div class="qixian-text">{{t('dashboard.TermText')}}</div>
              <div class="month-item" v-for="(child, index) in item.products" :key="index"
                   :class="{ 'month-item-active': selectMonth === index }" @click="funSelectMonth(child, index)">
                {{ child.months }} {{ formatDateUnit(child.type) }}
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="footer">
        <div class="packageAmount">
          <span class="amountText">{{ t("dashboard.PackageAmount") }}</span>
          <span class="amount">{{ formatNumber(amount) }} USDT</span>
        </div>
        <el-button type="primary" round @click="commitOrder">{{ t("dashboard.Confirm") }}</el-button>
      </div>
    </el-dialog>

    <!-- 支付订单 dialog -->
    <el-dialog class="payOrderDialog" v-model="payDialog" width="800" align-center @close="handleClose">
      <div class="payOrderDialogContent">
        <div class="payOrderDialogContentLeft">
          <div class="leftInfo">
            <h3>{{ t("order.PackageInformation") }}：</h3>
            <p>{{ t("dashboard.CurrencyNumber") }}：{{ t("dashboard.Infinite") }}</p>
            <p>{{ t("dashboard.AddressesNumber") }}：{{ t("dashboard.Infinite") }}</p>
            <p>{{ t("dashboard.Term") }}：{{ orderTime }} {{ formatDateUnit(type) }}</p>
            <hr/>
            <p>
              <span>{{ t("dashboard.PleaseMakePayment") }}：</span>
              <span style="font-weight: bold">{{ formatNumber(orderAmount) }} USDT</span>
            </p>
          </div>
          <div class="leftInfo">
            <h3>{{ t("order.PaymentOrder") }}：</h3>
            <p>
              {{ t("order.VersionFee") }}：
              <span style="font-weight: bold">{{ formatNumber(orderAmount) }} USDT</span>
            </p>
            <del>{{ t("order.Discount") }}：0 USDT</del>
          </div>
        </div>
        <div class="payOrderDialogContentRight">
          <h2>{{ t("order.PaymentOrder") }}</h2>
          <div class="rightBox">
            <div class="btns">
              <el-button v-for="(item, key) in Object.keys(buttonList)" :key="key"
                         :class="{ 'is-selected': selectedButton === item }" @click="selectButton(item)">
                {{ item }}
              </el-button>
            </div>
            <qrcode-vue :value="qrData.qrUrl" :size="150" :options="qrData.qrOptions"></qrcode-vue>
            <div class="payAddress">
              {{ qrData.qrUrl }}
              <el-icon :size="20">
                <CopyDocument @click="copyTextToClipboard(qrData.qrUrl)"/>
              </el-icon>
            </div>
          </div>

          <div class="payOrderDialogFooter">
            <div class="needPay">
              <span>{{ t("dashboard.PleaseMakePayment") }}</span>
              <span class="amount">{{ formatNumber(orderAmount) }} USDT</span>
            </div>
            <div>
              <el-button type="danger" round @click="handleUpdateOrder">{{ t("dashboard.ReSelect") }}</el-button>
              <el-button type="primary" round @click="handlePayFinish">{{ t("dashboard.Pay") }}</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!--      资源监测 start -->
    <div class="resource-monitor">
      <el-card shadow="hover" style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>{{ t("dashboard.ResourceMonitoring") }}</span>
          </div>
        </template>
        <div class="card-main">
          <!--      添加骨架屏, 防止页面闪烁    -->
          <el-skeleton class="el-skeleton" :rows="5" v-if="!maturityTime_blockWatch || !maturityTime_dapp" :loading="loading"/>
          <!-- 会员显示 -->
          <div class="resource-taocan" v-else-if="maturityTime_blockWatch || maturityTime_dapp">
            <div class="taocan-header">
              
              <img class="vip-icon" src="@/assets/images/dashboard/svip.svg" v-if="maturityTime_blockWatch !== '0'">
              <img class="vip-icon" src="@/assets/images/dashboard/vip.svg" v-else-if="maturityTime_dapp !== '0'">
              <h3 v-else>{{ t('dashboard.Inactive') }}</h3>
              <div @click="uptaocan">{{ t("dashboard.UpgradeVip") }}</div>
            </div>

            <div class="taocan-main">
              <p>
                <span>{{ t("dashboard.CurrencyNumber") }}</span>
                ：
                <span>{{ t("dashboard.Infinite") }}</span>
              </p>
              <p>
                <span>{{ t("dashboard.AddressesNumber") }}</span>
                ：
                <span>{{ t("dashboard.Infinite") }}</span>
              </p>
              <p>
                <span>{{ t("dashboard.WalletNumber") }}</span>
                ：
                <span>{{ t("dashboard.Infinite") }}</span>
              </p>
              <p>
                <span>{{ t("table.MaturityTime") }}</span>
                ：
                <span>{{ vipTime }}</span>
              </p>
            </div>

            <div class="btn-angle">
              <img src="../../assets/images/dashboard/taocan_angle.svg" alt=""/>
            </div>
          </div>

          <!-- 非会员显示 -->
          <div class="resource-taocan" v-else>
            <div class="taocan-header">
              <h3>{{ t("dashboard.Inactive") }}</h3>
              <div @click="uptaocan">{{ t("dashboard.UpgradeVip") }}</div>
            </div>

            <div class="taocan-main">
              <p>
                {{ t("dashboard.AddressesNumber") }}：
                <span>0</span>
              </p>
              <p>
                {{ t("dashboard.CurrencyNumber") }}：
                <span>0</span>
              </p>
              <p>
                {{ t("dashboard.WalletNumber") }}：
                <span>0</span>
              </p>
              <p>
                {{ t("table.MaturityTime") }}：
                <span>0</span>
              </p>
            </div>

            <div class="btn-angle">
              <img src="../../assets/images/dashboard/taocan_angle.svg" alt=""/>
            </div>
          </div>

          <div class="resource-info">
            <div class="top-item hoverGreen">
              <div>{{ invoiceData.tableData.addressCount }}</div>
              <p>{{ t("dashboard.AddressesNumber") }}</p>
              <el-button type="primary" class="btn" @click="navigateToRoute('生成地址', '/layout/generateaddress')">
                {{ t("dashboard.Config") }}
              </el-button>
            </div>
            <div class="top-item hoverGreen top-item2">
              <div class="numberBox">{{ invoiceData.tableData.tokenCount }}</div>
              <p>{{ t("dashboard.CurrencyNumber") }}</p>
              <!--              <span class="btn" @click="navigateToRoute('币种管理', '/layout/currencyManagement')">{{ t('dashboard.Config') }}</span>-->
              <el-button type="primary" class="btn" @click="navigateToRoute('币种管理', '/layout/currencyManagement')">
                {{ t("dashboard.Config") }}
              </el-button>
            </div>

            <!-- 待付款 -->

            <div class="top-item hoverGreen">
              <div>{{ orderNum }}</div>
              <p>{{ t("dashboard.Obligations") }}</p>
              <el-button type="primary" class="btn" @click="navigateToRoute('我的订单', '/layout/myorder')">
                {{ t("dashboard.Config") }}
              </el-button>
            </div>
            <!-- 漏推交易 -->
            <div class="top-item hoverGreen">
              <div>{{ collectNum }}</div>
              <p>{{ t("dashboard.MissedPushTransaction") }}</p>
              <el-button type="primary" class="btn" @click="navigateToRoute('充币列表', '/layout/rechargecurrency')">
                {{ t("dashboard.Config") }}
              </el-button>
            </div>

            <!--            <div class="top-item hoverGreen">-->
            <!--              <div>2<span>/10</span></div>-->
            <!--              <p>钱包数量</p>-->
            <!--            </div>-->
          </div>
        </div>
      </el-card>

      <!--      banner start-->

      <div class="banner" v-if="showBanner" :style="bannerStyles">
        <el-carousel :interval="3000" :autoplay="true" indicator-position="none"
                     style="padding: 10px; box-sizing: border-box">
          <el-carousel-item v-for="item in invoiceData.picList" :key="item">
            <a :href="item.skipUrl" target="_blank">
              <img :src="`${mainUrl}${item.pictureUrl}`" :alt="`${mainUrl}${item.pictureUrl}`"
                   style="width: 100%; height: 100%"/>
              <!--              <img src="@/assets/images/dashboard/skysp1.jpg">-->
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--      banner end-->
    </div>
    <!--      资源监测 end -->

    <!--      待办、优惠券、推广邀请 start -->
    <!-- <div class="todoList-coupon-generalization ">

      待办
      <div class="todoList three-box">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="card-header">
              <span>{{ t('dashboard.ToDo') }}</span>
            </div>
          </template>
          <div class="card-main">
            <div class="content">
                      待付款
              <div class="unPay hoverGreen">
                <h2 class="number "> {{ orderNum }} </h2>
                <p class="card-text">{{ t('dashboard.Obligations') }}</p>
              </div>
             漏推交易
              <div class="loseTransactions hoverGreen">
                <h2 class="number ">0</h2>
                <p class="card-text">{{ t('dashboard.MissedPushTransaction') }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>

         優惠券
      <div class="coupon three-box">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="card-header">
              <span>{{ t('dashboard.Coupon') }}</span>
            </div>
          </template>
          <div class="card-main">
            <div class="couponContent hoverGreen">
              <h2 class="number">0</h2>
              <p class="card-text">{{ t('dashboard.Coupon') }}：0{{ t('dashboard.Piece') }}</p>
            </div>
          </div>
        </el-card>
      </div>

          推广邀请
      <div class="generalization three-box">
        <el-card style="max-width: 100%">
          <template #header>
            <div class="card-header">
              <span>{{ t('dashboard.PromotionInvitation') }}</span>
            </div>
          </template>
          <div class="card-main">
            <div class="generalizationContent hoverGreen">
              <h2 class="number">0</h2>
              <p class="card-text">{{ t('dashboard.InvitationsNumber') }}</p>
              <span class="btn">{{ t('dashboard.ImmediatelyInvited') }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div> -->
    <!--      待办、优惠券、推广邀请 end-->

    <!--    接入流程 start -->
    <div class="accessFlow">
      <el-card shadow="hover" style="max-width: 100%; height: 4rem">
        <template #header>
          <div class="card-header">
            <span>{{ t("dashboard.AccessProcess") }}</span>
          </div>
        </template>
        <div class="card-main">
          <div class="flowContent">
            <div class="flowItem">
              <img src="@/assets/images/dashboard/flow_1.svg" alt=""/>
              <h3>{{ t("dashboard.ConfigureWallet") }}</h3>
              <p>{{ t("dashboard.ConfigureWalletInfo") }}</p>
            </div>
            <div class="flowItem">
              <img src="@/assets/images/dashboard/flow_2.svg" alt=""/>
              <h3>{{ t("dashboard.CurrencyConfig") }}</h3>
              <p>{{ t("dashboard.CurrencyConfigurationInfo") }}</p>
            </div>
            <div class="flowItem">
              <img src="@/assets/images/dashboard/flow_3.svg" alt=""/>
              <h3>{{ t("dashboard.StartUsing") }}</h3>
              <p>{{ t("dashboard.StartUsingInfo") }}</p>
            </div>
            <div class="flowItem">
              <img src="@/assets/images/dashboard/flow_4.svg" alt=""/>
              <h3>{{ t("dashboard.AccessBusiness") }}</h3>
              <p>{{ t("dashboard.AccessBusinessInfo") }}</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!--    接入流程 end -->
  </div>
</template>

<script setup>
import Header from "@/views/layout/header.vue";
import {useRouter} from "vue-router";
import {ref, unref, reactive, onMounted, computed} from "vue";
import {useFormatNumber} from "../../utils/timeStamp.js";
import {CopyDocument} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import QrcodeVue from "qrcode.vue";
import {useI18n} from "vue-i18n";
import {useUserStore} from "@/stores";
import {useClipboard} from "@vueuse/core";
import { index, getProductList, createOrder, getMaturityTime, getPayOrder, cancelOrder,  confirmPayOrder, getOrderList} from "@/require/api.js";

const {t} = useI18n();
const {formatNumber} = useFormatNumber();
const {text, copy, copied, isSupported} = useClipboard({legacy: true});

// 在组件被挂载后执行
onMounted(() => {
  getList(); // 获取首页数据
  getMaturityTimeFun(); // 获取到期时间
});

const userStore = useUserStore();
const router = useRouter();
const pageSize = ref(10);
const pageIndex = ref(1);
const amount = ref(); // 选择套餐时的金额
const loading = ref(true);
const mainUrl = import.meta.env.VITE_BASE_URL;
const currentMonth = ref(0); // 当前选中的月份
const currentMonthType = ref(0); // 当前期限
const showCurrentMonth = ref(false); // 默认不显示期限
const id = ref(); // 选择的套餐ID
const selectedButton = ref(); // 按钮默认选中BSC
const buttonList = ref([]); // 按钮列表
const selectProduct = ref(0); // 选择套餐
const selectMonth = ref(0); // 选择期限
// 图片列表mock数据
const picList2 = ref([{pictureUrl: "@/assets/images/dashboard/skysp1.jpg"}, {pictureUrl: "@/assets/images/dashboard/skysp2.jpg"}, {pictureUrl: "@/assets/images/dashboard/skysp3.jpg"}, {pictureUrl: "@/assets/images/dashboard/skysp4.jpg"}]);
const maturityTime_blockWatch = ref(''); // blockWatch 到期时间
const maturityTime_dapp = ref(''); // dapp 到期时间
const upGradeDialog = ref(false);
const payDialog = ref(false);
const orderId = ref();
const orderAmount = ref(0);
const orderTime = ref();
const type = ref(); // 年/月/日/时
const orderNum = ref(); // 待付款数量
const collectNum = ref(); // 漏推交易
const pollInterval = ref(null);

// 分页参数
const invoiceData = reactive({
  productsData: [],
  products: [],
  fee: "",
  id: "",
  months: "",
  tableData: [],
  _id: "",
  picList: [],
  skipUrl: [],
});

// 计算属性 来决定是否显示 banner
const showBanner = computed(() => invoiceData.picList.length > 0);

// 计算属性 动态样式绑定
const bannerStyles = computed(() => {
  if (showBanner.value) {
    return {
      height: "320px"
      // width: '25.5%'
    };
  }
  return {};
});

//  计算属性 如果 !maturityTime_blockWatch || !maturityTime_dapp 显示 svip / vip
const showSvip = computed(() =>{
  if(maturityTime_blockWatch.value !== '0'){
    return 'Svip'
  }else if(maturityTime_dapp.value !== '0'){
    return 'Vip'
  }
});

// 计算属性 显示 blockwatch到期时间 / dapp 到期时间
const vipTime = computed(() =>{
  if(maturityTime_blockWatch.value !== '0'){
    return maturityTime_blockWatch.value
  }else if(maturityTime_dapp.value !== '0'){
    return maturityTime_dapp
  }
});

// 选择套餐 方法
const funSelectProduct = (item, key) => {
  if(selectProduct.value === key){
    return;
  }

  currentMonth.value  = item.products[0].months;
  currentMonthType.value  = item.products[0].type;
  selectProduct.value = key;
  selectMonth.value = 0;
  amount.value = item.products[0].fee;
};

// 选择期限 方法
const funSelectMonth = (item, index) => {
  selectMonth.value = index;
  currentMonth.value = item.months;
  currentMonthType.value = item.type;
  item.showCurrentMonth = true
  amount.value = item.fee;
  // selectProduct.value = item._id
  id.value = item._id
};

// 按钮选中 方法
const selectButton = value => {
  qrData.qrUrl = unref(buttonList)[value];
  // 点击按钮 重置 selectedButton的值为 所选的按钮的value
  selectedButton.value = value;
};

// 获取首页数据 方法
const getList = async () => {
  try {
    // 获取地址
    const {code, data, msg} = await index();
    if (code === 200) {
      invoiceData.tableData = data;
      orderNum.value = data.orderNum;
      collectNum.value = data.collectNum;
      invoiceData.picList = data.pictureList;
      // invoiceData.skipUrl = data.skipUrl
    } else {
      ElMessage.error(msg);
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

// 获取到期时间 方法
async function getMaturityTimeFun() {
  const {code, data, msg} = await getMaturityTime({});
  if (code === 200) {
    maturityTime_blockWatch.value = data.blockWatchTime;
    maturityTime_dapp.value = data.dappTime;
  } else {
    ElMessage.error(msg);
  }
}


function handlePayFinish() {
  funConfirmPayOrder();
  payDialog.value = false;
  pollInterval.value = setInterval(async () => {
    const {data, msg} = getMaturityTime();
    if (data != 0) {
      // ElMessage.success('支付成功')
      console.log("支付成功");
    } else {
      // ElMessage.error(msg)
      console.log(msg);
    }
  }, 5000);
}

// 支付完成 方法
async function funConfirmPayOrder() {
  const {code, data, msg} = await confirmPayOrder({id: orderId.value});
  if (code === 200) {
    ElMessage.success(t("message.PaySuccess"));
  } else {
    ElMessage.error(msg);
  }
}

// 更改套餐 方法
async function handleUpdateOrder() {
  const {code} = await cancelOrder({id: orderId.value});
  if (code === 200) {
    payDialog.value = false;
    amount.value = orderAmount.value;
    selectProduct.value = 0; // 取消订单时,重置选择的套餐为0
    await uptaocan();
  }
}

// 创建订单并生成地址 方法
const funCreateOrder = async (id, value) => {
  try {
    const {code, data, msg} = await createOrder({id});
    if (code === 200) {
      orderId.value = data.orderId;
      orderAmount.value = data.amount;
      orderTime.value = data.time;
      buttonList.value = data.address;
      selectedButton.value = Object.keys(data.address)[0];
      qrData.qrUrl = unref(buttonList)[selectedButton.value];
      type.value = data.type;
    } else {
      ElMessage.error(msg);
    }
  } catch (error) {
    console.log(error);
  }
};

// 点击付费升级按钮  dialog显示 方法
async function uptaocan() {
  const res = await getPayOrder();
  if (res.data) {
    orderId.value = res.data.id;
    orderAmount.value = res.data.amount;
    orderTime.value = res.data.time;
    buttonList.value = res.data.address;
    selectedButton.value = Object.keys(unref(buttonList))[0];
    qrData.qrUrl = unref(buttonList)[selectedButton.value];
    payDialog.value = true;
    return;
  } else {
    //获取产品列表
    const {code, data} = await getProductList({});
    if (code === 200) {
      id.value = data[0].products[0]._id
      invoiceData.productsData = data;
      currentMonth.value = data[0].products[0].months
      currentMonthType.value = data[0].products[0].type
      amount.value = data[0].products[0].fee;
    }
    upGradeDialog.value = true;
  }
}

// 点击确认订单按钮 提交订单 方法
async function commitOrder() {
  // id.value = invoiceData.productsData[unref(selectProduct)].id;
  upGradeDialog.value = false;
  await funCreateOrder(id.value);
  payDialog.value = true;
}



// 选择套餐 或 支付订单 时关闭dialog 方法
const handleClose = val => {
  getMaturityTimeFun();
  getList();
};

// 跳转路由 方法
const navigateToRoute = (title, v) => {
  router.push(v);
};

// 复制文本方法
const copyTextToClipboard = async val => {
  try {
    await copy(unref(val));
    ElMessage.success(t("message.CopySuccess"));
  } catch (err) {
    console.error("Failed to copy text: ", err);
  }
};

/*
 根据 type 显示 日期单位 方法
  "1" 年
  "2" 月
  "3" 日
  "4" 时
*/
function formatDateUnit(type) {
  switch (type) {
    case "1":
      return t("global.Years");
    case "2":
      return t("global.Months");
    case "3":
      return t("global.Days");
    case "4":
      return t("global.Hours");
  }
}

// 二维码参数
const qrData = reactive({
  qrUrl: "",
  qrOptions: {
    /*
    二维码选项，可以根据需要进行配置
    L: 约 7% 或更少的错误能被纠正。
    M: 约 15% 或更少的错误能被纠正。
    Q: 约 25% 或更少的错误能被纠正。
    H: 约 30% 或更少的错误能被纠正。纠错能力越高，二维码的密集度也越高，但生成的二维码尺寸会相应增加。
    margin: 表示二维码的外边距，即二维码图案到画布边缘的距离，以模块为单位。默认为 4 个模块，可根据需要增加或减少
    scale: 表示二维码的放大倍数。默认为 4，意味着每个模块（方块）会被放大为 4 像素。增大放大倍数可以生成更大尺寸的二维码，也可以增加二维码的可读性，但会增加生成的二维码图像的尺寸
    */
    errorCorrectionLevel: "H",
    margin: 2,
    scale: 4
  }
});
</script>

<style scoped lang="less">
@iconGreen: #05aa69;
@iconBlack: #000000;

// Svip  vip 图标
.vip-icon{
  height: 35px;
}

.status-icon {
  width: 20px;
  height: 20px;
}

:deep(.el-skeleton) {
  text-align: left;
  width: 40%;
}

.el-icon {
  color: @iconBlack;
}

.el-icon:hover {
  color: @iconGreen;
}

//公共样式
.wid70 {
  width: 70%;
}

.number {
  font-size: 0.48rem;
  font-family: DINAlternate-Bold;
  color: #162630;
  letter-spacing: -0.4px;
  font-weight: 700;
}

.card-text {
  font-size: 0.18rem;
  font-family: PingFangSC-Regular;
  color: rgba(22, 38, 48, 0.6);
  letter-spacing: -0.1px;
  line-height: 0.2rem;
}

:deep(.el-carousel) {
  padding: 0 !important;
}

.el-card {
  // border-radius: .1rem;

  .card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-size: 0.15rem;
    color: rgba(22, 38, 48, 0.6);
    letter-spacing: -0.2px;
    line-height: 0.24rem;
    font-weight: 700;
  }
}

// ***********************************

.container {
  position: relative;

  //付费升级dialog
  :deep(.el-dialog__body) {
    padding: 0;
  }

  // 付费升级
  // .upGrade {
  //   .content {
  //     width: 100%;
  //     padding: .2rem;
  //     box-sizing: border-box;

  //     .items {
  //       width: 100%;
  //       height: 100%;
  //       display: flex;
  //       flex-wrap: wrap;
  //       justify-content: space-evenly;
  //       align-items: center;
  //       margin: .2rem;

  //       .contentItem {
  //         width: 35%;
  //         height: 1.5rem;
  //         border: 1px solid #c9c9c9;
  //         border-radius: 8px;
  //         display: flex;
  //         flex-direction: column;
  //         justify-content: space-evenly;
  //         align-items: flex-start;
  //         margin: .3rem 0;
  //         box-sizing: border-box;
  //         padding: .1rem 0 0 .2rem;
  //         cursor: pointer;
  //       }
  //     }

  //     .content-item-active {
  //       box-sizing: border-box;
  //       border: 2px solid #409eff !important;
  //     }

  //     .monthsBox {
  //       width: 100%;
  //       display: flex;
  //       flex-direction: row;
  //       justify-content: space-between;
  //       align-items: center;

  //       .monthItem {
  //         width: 1rem;
  //         height: .3rem;
  //         border: 1px solid #000;
  //         border-radius: 8px;
  //         display: flex;
  //         justify-content: center;
  //         align-items: center;
  //       }
  //     }

  //   }
  //   // 选择套餐 footer
  //   .footer {
  //     width: 100%;
  //     padding: 20px 32px;
  //     text-align: right;
  //     display: flex;
  //     flex-direction: row;
  //     justify-content: flex-end;
  //     align-items: center;

  //     .packageAmount{
  //       .amountText{
  //         margin: 0 10px;
  //       }
  //       .amount{
  //         margin-right: 10px;
  //       }
  //     }
  //   }
  // }

  .upGrade {
    //width: 1008px;
    //height: 789px;


    .content {
      width: 100%;
      max-height: 1008px;
      overflow: hidden;
      padding: 20px 53px 20px 53px;
      box-sizing: border-box;
      height: 600px;
      background: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .dialog-title {
        font-family: Inter, Inter;
        font-weight: 700;
        font-size: 50px;
        color: #3D3D3D;
        margin-bottom: 79px
      }

      .items {
        width: 100%;
        display: flex;
        // flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 77px;

        .content-item-active {
          border: 2px solid #409EFF;
        }

        .contentItem {
          width: 4.12rem;
          height: 2.80rem;
          border: 2px solid #E4E4E4;
          border-radius: 10px 10px 10px 10px;
          cursor: pointer;
          transition: border-color 0.3s;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .left {
            height: 100%;
            overflow: hidden;
            padding: .19rem .26rem;
            box-sizing: border-box;
            font-family: Inter, Inter;
            font-weight: 400;
            font-size: 16px;
            color: #3D3D3D;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .taocan-desc{
              p{
                margin: 10px 0;
              }
            }

            .icon-content{
              .icon-box{
                display: flex;;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 5px;
                img{
                }
                span{
                  font-family: Inter, Inter;
                  font-weight: 500;
                  font-size: 18px;
                  color: #3D3D3D;
                }
              }
            }

            .taocan-title-box {
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: flex-start;
              gap: .02rem;

              .taocanTitle {
                font-family: Inter, Inter;
                font-weight: 600;
                font-size: .18rem;
                color: #3D3D3D;
                white-space: nowrap;
              }

              .taocan-month-box {
                width: .74rem;
                height: .29rem;
                border-radius: 163px 163px 163px 163px;
                border: 1px solid #1086FF;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-family: Inter, Inter;
                font-weight: 500;
                font-size: 16px;
                color: #1086FF;
              }
            }
          }

          .right {
            height: 100%;
            padding: .19rem .13rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            background: #F0F3F8;
            border-radius: 0px .1rem .1rem 0px;

            .qixian-text {
              font-family: Inter, Inter;
              font-weight: 600;
              font-size: .24rem;
              color: rgba(61, 61, 61, 0.54);
              margin-bottom: 15px;
            }

            .month-item {
              width: 1.37rem;
              height: .36rem;
              font-size: 20px;
              border-radius: 16.3rem ;
              border: 1px solid #1086FF;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin-bottom: .11rem;
            }

            .month-item-active {
              background: #409EFF;
              border-radius: 163px 163px 163px 163px;
              font-family: Inter, Inter;
              font-weight: 500;
              font-size: 20px;
              color: #FFFFFF;
            }
          }

          &.content-item-active {
            border-color: #409eff;
            //width: 100%;
            //width: 4.12rem;
            //height: 2.80rem;
          }

          .taocanTitle {
            font-size: 1.2rem;
            margin-bottom: 8px;
          }
        }
      }
    }

    .footer {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 16px 53px 16px 53px;
      box-sizing: border-box;

      .packageAmount {
        .amountText {
          margin-right: 10px;
          width: 9.9rem;
          height: 56px;
          font-family: Inter, Inter;
          font-weight: 500;
          font-size: 24px;
          color: #3D3D3D;
          line-height: 56px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .amount {
          margin: 0 24px;
          width: 218px;
          height: 56px;
          font-family: Inter, Inter;
          font-weight: 600;
          font-size: 28px;
          color: #FF3D3D;

        }
      }

      .el-button {
        width: 141px;
        height: 46px;
        background: #409EFF;
        border-radius: 163px 163px 163px 163px;
        margin-left: 20px;
      }
    }
  }

  //付款 dialog
  .payDialog {
    .content {
      .payAddress {
        margin: 10px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }

    .footer {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #05aa69;
      padding-top: 10px;
      box-sizing: border-box;

      :deep(.el-button) {
        background-color: #05aa69;
        border-color: #05aa69;
        border-radius: 28px;
      }

      .needPay {
        text-align: left;
        font-weight: 600;

        .amount {
          margin-left: 10px;
          font-weight: 600;
          color: red;
        }
      }
    }
  }

  //资源监测 start
  .resource-monitor {
    margin: 0.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    //  控制室 banner start
    .banner {
      // background-color: #f4f4fc ;
      // background-color: #fff ;
      width: 30%;
      height: 100%;
      // border-radius: 10px;
      margin-left: 0.1rem;
      display: block;

      :deep(.el-carousel__container) {
        height: 100%;
        border-radius: 0;
      }

      :deep(.el-carousel) {
        height: 100%;
        border-radius: 0;
      }

      img {
        // width: 100%;
        // height: 100%;
        background-size: cover;
        background: no-repeat;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
      }

      img:hover {
        cursor: pointer;
      }
    }

    // banner end
    .el-card {
      width: 100%;

      .card-main {
        height: 220px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .resource-taocan {
          width: 38%;
          height: 2.3rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          background: #fcf3ea;
          border-radius: 0.08rem;
          position: relative;

          .taocan-header {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 0.1rem 0;
            padding: 0.16rem 0.24rem;
            box-sizing: border-box;

            h3 {
              font-family: PingFangSC-Medium;
              font-size: 0.2rem;
              color: #824b46;
              letter-spacing: -0.3px;
              line-height: 0.28rem;
              font-weight: 700;
            }

            div {
              line-height: 20px;
              padding: 3px 12px;
              box-sizing: border-box;
              background: #824b46;
              border-radius: 16px;
              cursor: pointer;
              border: 1px solid #824b46;
              color: #fff;
            }
          }

          .taocan-main {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            padding: 0.16rem 0.24rem;
            box-sizing: border-box;
            margin-right: 0.16rem;
            position: relative;
            z-index: 10;

            p {
              margin-bottom: 0.04rem;
              font-family: PingFangSC-Regular;
              font-size: 0.16rem;
              color: rgba(130, 75, 70, 0.6);
              letter-spacing: -0.1px;
              line-height: 0.2rem;
              width: 80%;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;

              span {
                font-weight: 700;
              }
            }
          }

          .btn-angle {
            z-index: 1;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 176px;
            height: 111px;

            img {
              width: 176px;
              height: 111px;
            }
          }
        }

        .resource-info {
          width: 60%;
          height: 2.3rem;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .top-item {
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;

            div {
              font-family: DINAlternate-Bold;
              font-size: 24px;
              color: #162630;
              letter-spacing: -0.4px;
              text-align: center;
              font-weight: 700;
              margin-top: 0.4rem;
            }

            p {
              margin: 0.4rem 0;
            }

            .btn {
              margin-top: -0.25rem;
              width: 38%;
              height: 32px;
              line-height: 32px;
              text-align: center;
              border: 1px solid #409eff;
              border-radius: 28px;
              font-size: 13px;
            }

            p {
              font-size: 0.18rem;
              font-family: PingFangSC-Regular;
              color: rgba(22, 38, 48, 0.6);
              letter-spacing: -0.1px;
              line-height: 0.2rem;
            }
          }
        }
      }
    }
  }

  //资源监测 end

  //待办、优惠券、推广邀请 start
  .todoList-coupon-generalization {
    margin: 0.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .three-box {
      width: 32%;
    }

    //待办
    .todoList {
      .el-card {
        .card-main {
          height: 2.5rem;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: flex-start;

          .content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;

            div {
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              align-items: center;
            }
          }
        }
      }
    }

    //优惠券
    .coupon {
      .el-card {
        .card-main {
          height: 2.5rem;
          display: flex;
          justify-content: center;
          align-items: flex-start;

          .couponContent {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
          }
        }
      }
    }

    //推广邀请
    .generalization {
      .el-card {
        .card-main {
          height: 2.5rem;
          display: flex;
          justify-content: center;
          align-items: flex-start;

          .generalizationContent {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
              margin-top: 0.55rem;
            }

            p {
              margin-top: 0.47rem;
            }

            .btn {
              margin-top: 8px;
              padding: 0 0.2rem;
              box-sizing: border-box;
              //width: 25%;
              height: 0.32rem;
              line-height: 0.32rem;
              text-align: center;
              border: 1px solid #05aa69;
              border-radius: 0.28rem;
              color: #05aa69;
              font-size: 0.13rem;
              display: block;
            }

            .bottom:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  //待办、优惠券、推广邀请 end

  //接入流程 start
  .accessFlow {
    width: 100%;

    .el-card {
      .card-main {
        height: 250px;

        .flowContent {
          height: 100%;
          margin-top: 0.1rem;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .flowItem {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            h3 {
              margin: 0.1rem 0;
              font-family: PingFangSC-Medium;
              font-size: 0.15rem;
              color: #162630;
              letter-spacing: -0.2px;
              line-height: 0.24rem;
              font-weight: 700;
            }

            p {
              max-width: 1.5rem;
              font-size: 0.13rem;
              font-family: PingFangSC-Regular;
              color: rgba(22, 38, 48, 0.6);
              letter-spacing: -0.1px;
              text-align: center;
              line-height: 0.2rem;
            }
          }
        }
      }
    }
  }

  //接入流程 end
}

:deep(.el-dialog) {
  border-radius: 10px;
}

.el-dialog {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

// 支付订单 dialog
.el-dialog.payOrderDialog {
  .payOrderDialogContent {
    display: flex;

    .payOrderDialogContentLeft {
      width: 30%;
      padding: 0.2rem 0;
      box-sizing: border-box;
      background: #162630;
      border-radius: 10px 0 0 10px;

      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .leftInfo {
        width: 80%;
        padding: 0.2rem 0;
        background: #1f2f38;
        border-radius: 10px;
        margin: 0.1rem 0;
        color: #ccc;

        h3 {
          color: #fff;
        }

        hr {
          margin: 0.1rem 0;
        }
      }
    }

    .payOrderDialogContentRight {
      width: 70%;

      h2 {
        font-size: 0.26rem;
        color: #000;
        padding-top: 0.5rem;
      }

      .rightBox {
        padding: 0.4rem 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .btns {
          margin-bottom: 0.5rem;
        }

        .payAddress {
          margin-top: 0.2rem;

          .el-icon {
            vertical-align: middle;
          }
        }
      }
    }
  }

  .payOrderDialogFooter {
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-top: 1px solid #409eff;

    .needPay {
      text-align: left;
      font-weight: 600;
    }
  }
}

:deep(.el-dialog) {
  --el-dialog-padding-primary: 0;
}

// 金额 样式
.amount {
  margin-left: 10px;
  font-weight: 600;
  color: red;
}

// 按钮选中样式
.is-selected {
  /* 添加你希望表示选中状态的样式，比如改变背景色 */
  background-color: #409eff; /* Element UI 中按钮激活的颜色，可根据需要调整 */
  color: #fff;
}

.package-selection {
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  text-align: center;
}

.packages {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.package {
  border: 1px solid #ddd;
  padding: 20px;
  width: 200px;
}

.details {
  text-align: left;
}

.active {
  font-weight: bold;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
